<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
    <style>
        /* body {
        font-family: "Sofia";
        font-size: 22px;
        } */
        p.a {
        font: 20px Arial, sans-serif;
        }
        p.b {
        font: italic bold 12px/30px Georgia, serif;
        }
    </style>
</head>
<body>
    <!-- <h1 style="font-size:0.5vw;">响应式文本</h1>

    <p style="font-size:5vw;">请调整浏览器窗口的大小，以查看文本大小如何缩放。</p>

    <p style="font-size:5vw;">调整文本大小时，请使用 "vw" 单位。 10vw 将尺寸设置为视口宽度的 10％。</p>

    <p>视口是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。</p>
    <h1>Sofia Font</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> -->
    <h1>字体属性</h1>

    <p class="a">这是一个段落 字体大小设置为20px, 字体为： Arial.</p>

    <p class="b">这是一个段落. 字体设置为斜体并且粗, 大小为12px, 高度为30px, 字体为：Georgia.</p>
</body>
</html>